<template>
    <div class="info-page">
        <div class="row-icon row">
            <div class="icon-con" :class="type">
                <van-icon :name="type" />
            </div>
        </div>
        <div class="row-title row">
            {{title}}
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    computed: {
        title() {
            return (this.getQuery('title') || '标题')
        },
        type() {
            //success/fail/cross
            return (this.getQuery('type') || 'success')
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .info-page{width:100%; height:100%;}

    .info-page .icon-con{display:inline-block; font-size:80px; background:#c9c9c9; color:white; width:120px; height:120px; line-height:140px; text-align:center; border-radius:50%;}
    .info-page .icon-con.success{background:#07c160;}
    .info-page .icon-con.fail{background:#ff976a;}

    .info-page .row{text-align:center; display:block;}

    .info-page .row-icon{padding:2em;}
    .info-page .row-title{font-size: 20px; padding:0 1em;}
</style>
